<template>
    <div class="login-container bg">
        <div class="login-box">
            <div class="log-img">
                <img src="@/assets/imgs/logo.png" alt="">
            </div>
            <div class="login-title">
                <h2>欢迎登录办公平台</h2>
            </div>
            <div class="login-form">
                <el-form ref="loginFormRef" :model="loginForm" :rules="ruleForm" label-position="left" auto-complete="on" v-if="loginMode">
                    <el-form-item prop="user_name">
                        <span class="svg-container">
                            <svg-icon icon-class="user"></svg-icon>
                        </span>
                        <el-input v-model="loginForm.user_name" placeholder="请输入用户名" tabindex="1"></el-input>
                    </el-form-item>
                    <el-tooltip v-model="capsTooltip" content="已开启键盘大写" placement="left" manual>
                        <el-form-item prop="password">
                            <span class="svg-container">
                                <svg-icon icon-class="login_password"></svg-icon>
                            </span>
                            <el-input :type="passwordType" v-model="loginForm.password" placeholder="请输入密码" tabindex="2"
                                @keyup="checkCapslock" @blur="capsTooltip = false" @keyup.enter="handleLogin"></el-input>
                            <span class="show-pwd" @click="showPwd">
                                <svg-icon :icon-class="passwordType === 'password' ? 'eye-off' : 'eye-on'"></svg-icon>
                            </span>
                        </el-form-item>
                    </el-tooltip>
                    <el-button :loading="loading" type="primary" class="login-btn" @click.prevent="handleLogin">
                        登录
                    </el-button>
                </el-form>
            </div>
        </div>

        <div class="more">
            <span> Copyright ©2021</span>
            <a href="https://beian.miit.gov.cn" target="_blank">
            鄂ICP备18025029号-1
            </a>
        </div>
    </div>
</template>

<script lang="ts">
import { defineComponent, ref, reactive, toRefs } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { useStore } from 'vuex';
import { ElMessage } from 'element-plus';


export default defineComponent({
    setup() {
        const router = useRouter()
        const route = useRoute()
        const store = useStore()
        const state = reactive({
            loginMode: true, // 登录方式切换
            loginForm: {
                user_name: 'admin',
                password: '',
            },
            loginFormRef: ref<any>(null),
            ruleForm: {
                user_name: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
                password: [{ required: true, message: '请输入密码', trigger: 'blur' }]
            },
            loading: false,
            capsTooltip: false,
            passwordType: "password",
        })
        const methods = reactive({
            // 监听大写
            checkCapslock: (e: any) => {
                const { key } = e
                state.capsTooltip = key !== null && key.length === 1 && key >= 'A' && key <= 'Z'
            },
            showPwd: () => {
                if (state.passwordType === "password") {
                    state.passwordType = "";
                } else {
                    state.passwordType = "password";
                }
            },
            // 登录 
            handleLogin: () => {
                state.loginFormRef.validate( async (valid: boolean) => {
                    if (valid) {
                        state.loading = true
                        const res = await store.dispatch('user/ACTION_LOGIN', state.loginForm).finally(() => {
                            state.loading = false
                        })
                        // console.log(res, "====>login" )
                        if (res.code == 200) {
                            const toPath = decodeURIComponent((route.query.redirect || '/') as string)
                            ElMessage({
                                message: '登录成功！',
                                type: 'success',
                                duration: 1000
                            })
                            router.replace(toPath).then(() => {
                                if (route.name == 'Login') {
                                    router.replace('/')
                                }
                            })
                        }
                    }
                })
            }
                
        })

        return {
            ...toRefs(state),
            ...toRefs(methods)
        }
    }
})
</script>

<style lang="scss">
.bg{
    background-image: url(~@/assets/imgs/bg.png);
    background-position: top;
    background-size: cover;
    background-repeat: no-repeat;
}
.login-container {
    width: 100%;
    height: 100%;
    background-color: #264A6B;
    .login-box{
        width: 400px;
        height: 380px;
        border-radius: 5px;
        background-color: hsla(0,0%,100%,.7);
        position: absolute;
        top: 50%;
        right: 10%;
        transform: translate(0%,-50%);
        .log-img{
            position: absolute;
            left: 50%;
            transform: translate(-50%,-50%);
            height: 80px;
            width: 80px;
            padding: 5px;
            border-radius: 50%;
            border: 1px #ECEEED;
            box-shadow: 0 0 10px #ddd;
            background-color: #fff;
            img{
                background-color: #ECEEED;
                height: 80px;
                width: 80px;
                border-radius: 50%;
            }
        }
        .login-title{
            position: absolute;
            width: 80%;
            top: 20%;
            left: 50%;
            transform: translate(-50%,-50%);
            text-align: center;
            text-shadow: 4px 2px 2px #999999;
            
        }
        .login-form{
            position: absolute;
            width: 80%;
            top: 60%;
            left: 50%;
            transform: translate(-50%,-50%);
           
        }
        .login-btn{
            margin-top: 20px;
            width: 100%; 
            height: 40px; 
            font-size: 14px;
            background-color: #1677ff;
        }
        
    }

    .svg-container {
        padding-left: 10px;
        display: inline-block;
        font-size: 14px;
        color: #889aa4;
    }
    .show-pwd{
        background-color: transparent;
        position: absolute;
        right: 10px;
        top: 5px;
        font-size: 16px;
        cursor: pointer;
        user-select: none;
        color: #889aa4;
    }

    .el-form-item {
        height: 40px;
        background: #fff;
        border-radius: 5px;
        color: #454545;
    }
    .el-input {
        display: inline-block;
        height: 40px;
        width: 85%;
        input {
            height: 40px;
            background: transparent;
            border: 0px;
            border-radius: 0px;
            padding: 12px 5px 12px 15px;
            -webkit-appearance: none;
            &:-webkit-autofill {
                box-shadow: 0 0 0px 1000px #fff inset !important;
            }
        }
    }
}

.more{
    position: fixed;
    bottom: 50px;
    left: 40%;
    color: #fff;
    a {
        text-decoration: none;
        cursor: pointer;
        color: #fff;
    }
}
</style>